<template>
  <view class="content">
    <view class="card">
      <view class="info-row flexr align-center">
        <text class="label required"> 姓名 </text>
        <input
          :value="customerName"
          @change="customerName = $event.target.value"
          type="text"
          class="value flex-1 align-self-stretch"
          placeholder="请输入姓名"
        />
        <image class="gen" src="@/static/gen_nick.png" @tap="genNick"></image>
      </view>
      <view class="divider"></view>
      <view class="info-row flexr align-center">
        <text class="label"> 手机号 </text>
        <input
          :value="mobile"
          @change="mobile = $event.target.value"
          type="text"
          class="value flex-1 align-self-stretch"
          placeholder="不填则使用主账号手机号"
        />
      </view>
    </view>

    <view class="card">
      <view class="info-row flexr align-center" @click="showSexPicker">
        <text class="label required"> 性别 </text>
        <text class="value flex-1">
          {{ sex || "请选择" }}
        </text>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </view>
      <view class="divider"></view>
      <view class="info-row relation-row flexr align-center">
        <text class="label required"> 成员关系 </text>
        <view class="value flex-1 flexr flex-wrap">
          <myRadio
            v-for="(item, index) in relations"
            :key="index"
            :active="relationIndex == index"
            @tap="selectRelation(index)"
          >
            <text class="radio-text">{{ item }}</text>
          </myRadio>
        </view>
      </view>

      <view class="divider"></view>
      <view class="info-row flexr align-center" @click="showDatePicker">
        <text class="label required"> 生日 </text>
        <text class="value flex-1">
          {{ birthday || "请选择" }}
        </text>
        <image class="arrow-right" src="@/static/arrow_right.png"></image>
      </view>
    </view>

    <view class="flex-1"></view>
    <view class="primary-button" @click="register"> 确定 </view>

    <uni-popup
      ref="datePickerRef"
      @change="({ show }) => (datePickerShow = show)"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <myDatePicker
        :show="datePickerShow"
        :years="years"
        :months="months"
        :days="days"
        :val="dateVal"
        @onCancel="onCancelDatePicker"
        @onConfirm="onConfirmDatePicker"
      ></myDatePicker>
    </uni-popup>

    <uni-popup
      ref="sexPickerRef"
      type="bottom"
      background-color="#fff"
      border-radius="30rpx"
      :mask-click="false"
    >
      <sexPicker
        @onCancel="onCancelSexPicker"
        @onConfirm="onConfirmSexPicker"
      ></sexPicker>
    </uni-popup>
  </view>
</template>
<script setup>
import randomName from "@/subpages/tools/random-name";
import myDatePicker from "@/subpages/widgets/myDatePicker.vue";
import sexPicker from "@/subpages/my/sexPicker.vue";
import myRadio from "@/widgets/my-radio.vue";
import { ref } from "vue";
import { useUserStore } from "@/store/user";
import { onLoad } from "@dcloudio/uni-app";
const userStore = useUserStore();

const customerName = ref("");
const mobile = ref(userStore.userInfo.mobile);
const birthday = ref("");
const sex = ref("");

const datePickerRef = ref(null);
const datePickerShow = ref(false);
const sexPickerRef = ref(null);

const relations = ref(["儿子", "女儿", "父亲", "母亲", "其他"]);
const relationIndex = ref(-1);

function genNick() {
  customerName.value = randomName.getNickName();
}

function selectRelation(index) {
  console.log("selectRelation", index);
  relationIndex.value = index;
  if (index === relations.value.length - 1) {
    // 其他
    // 弹出输入框
    uni.showModal({
      title: "成员关系",
      content: relations.value[index],
      editable: true,
      confirmColor: "rgba(54, 187, 165, 1)",
      placeholderText: "请输入成员关系",
      success: function (res) {
        if (res.confirm) {
          console.log("用户点击确定");
          relations.value[index] = res.content;
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  }
}

function getAvaliableYMD() {
  const date = new Date();
  const years = [];
  const year = date.getFullYear();
  const months = [];
  const month = date.getMonth() + 1;
  const days = [];
  const day = date.getDate();
  for (let i = 1900; i <= year; i++) {
    years.push(i + "");
  }
  for (let i = 1; i <= 12; i++) {
    months.push(i < 10 ? "0" + i : i + "");
  }
  for (let i = 1; i <= 31; i++) {
    days.push(i < 10 ? "0" + i : i + "");
  }
  return { years, months, days, year, month, day };
}
const initData = getAvaliableYMD();
const years = ref(initData.years);
const months = ref(initData.months);
const days = ref(initData.days);
const dateVal = ref([
  initData.years.indexOf(initData.year + ""),
  initData.months.indexOf(
    initData.month < 10 ? "0" + initData.month : initData.month + ""
  ),
  initData.days.indexOf(
    initData.day < 10 ? "0" + initData.day : initData.day + ""
  ),
]);

function showDatePicker() {
  datePickerRef.value?.open();
}
function onCancelDatePicker() {
  datePickerRef.value?.close();
}
function onConfirmDatePicker(date) {
  datePickerRef.value?.close();
  console.log("onConfirmDatePicker", date);
  birthday.value = date;
}
function showSexPicker() {
  sexPickerRef.value?.open();
}
function onCancelSexPicker() {
  sexPickerRef.value?.close();
}
function onConfirmSexPicker(s) {
  sexPickerRef.value?.close();
  sex.value = s;
}

async function register() {
  console.log(
    "register",
    customerName.value,
    mobile.value,
    sex.value,
    relations.value[relationIndex.value],
    birthday.value,
  );
  // 检查空值
  if (!customerName.value) {
    uni.showToast({
      title: "请输入昵称",
      icon: "none",
    });
    return;
  }
  if (!sex.value) {
    uni.showToast({
      title: "请选择性别",
      icon: "none",
    });
    return
  }
  if (relationIndex.value < 0) {
    uni.showToast({
      title: "请选择成员关系",
      icon: "none",
    });
    return
  }
  if (!birthday.value) {
    uni.showToast({
      title: "请选择生日",
      icon: "none",
    });
    return;
  }
  uni.showLoading({
    title: "注册中...",
  });
  const registerSuccess = await userStore.register(
    mobile.value,
    customerName.value,
    "",
    birthday.value,
    sex.value,
    "",
    relations.value[relationIndex.value],
    userStore.userInfo.customerId,
  );
  if (registerSuccess) {
    uni.showToast({
      title: "添加成功",
      icon: "success",
    });
    userStore.getCustomerChilds();
    uni.navigateBack();
  } else {
    uni.showToast({
      title: "添加失败",
      icon: "error",
    });
  }
}

</script>
<style lang="scss">
.content {
  padding-top: 32rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  .card {
    background-color: white;
    border-radius: 12rpx;
    .info-row {
      padding: 0 32rpx;
      height: 96rpx;
      font-size: 28rpx;
      &.relation-row {
        height: 140rpx;
        align-items: flex-start;
        padding-top: 30rpx;
        align-content: end;
      }
      .label {
        color: $text-color1;
        &.required {
          &::after {
            content: "*";
            color: red;
          }
        }
      }
      .value {
        color: $text-color5;
        text-align: right;
        margin-left: 40rpx;
        .radio-text {
          color: rgba(102, 102, 102, 1);
        }
      }
      .arrow-right {
        width: 15rpx;
        height: 24rpx;
        margin-left: 12rpx;
      }
      .align-self-stretch {
        height: 100%;
      }
      .gen {
        width: 80rpx;
        height: 80rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }
    }
  }
  .card + .card {
    margin-top: 24rpx;
  }
}
</style>